<!-- 春季联赛主入口 -->
<script setup>
import { ref, computed, onMounted, watch, reactive, inject } from 'vue'
import { useStore } from 'vuex';
import leg0 from '@/views/ceremony/leg0/leg0.vue'
import leg1 from '@/views/ceremony/leg1/leg1.vue'
import leg2 from '@/views/ceremony/leg2/leg2.vue'
import leg3 from '@/views/ceremony/leg3/leg3.vue'
import leg4 from '@/views/ceremony/leg4/leg4.vue'
import Toast from '../../components/toast.vue';
import EmptyData from '../../components/emptyData.vue';
const store = useStore()
const isAnchor = store.state.isAnchor
const api = store.state.api
const common = store.state.common.obj
const routesList = [
    {
        route: 'leg0',
        name: '<p>联赛<br>秘籍</p>',
        name2: '<p>联赛<br>秘籍</p>',
        id: 0
    },
    {
        route: 'leg1',
        name: '<p>报名赛</p><p>03.21</p>',
        name2: '<p>第一赛段</p>',
        id: 1
    },
    {
        route: 'leg2',
        name: '<p>淘汰赛</p><p>03.22-24</p>',
        name2: '<p>第二赛段</p>',
        id: 2
    },
    {
        route: 'leg3',
        name: '<p>晋级赛</p><p>03.25-30</p>',
        name2: '<p>第三赛段</p>',
        id: 3
    },
    {
        route: 'leg4',
        name: '<p>决赛</p><p>03.31</p>',
        name2: '<p>第四赛段</p>',
        id: 4
    },
]
let actRoutes = ref([])
actRoutes.value = routesList
let tabIndex = ref(0)
let serverStage = ref(0)
serverStage.value = store.state.cur + 1
watch(() => store.state.cur + 1, (oldVal, newVal) => {
    tabIndex.value = serverStage.value = store.state.cur + 1
}), { deep: true, immediate: true }
let isDisabled = ref(true)
let isDisabled1 = ref(true)
onMounted(() => {
    if (store.state.isiOS || store.state.isAndroid) {
        if (serverStage.value < 4) {
            actRoutes.value = routesList.slice(0, 4)
            isDisabled.value = false
            isDisabled1.value = false
            tabIndex.value = serverStage.value
        }
        else {
            actRoutes.value = routesList.slice(4, 5)
            isDisabled.value = true
            isDisabled1.value = false
            tabIndex.value = actRoutes.value[0].id
        }
    } else {
        tabIndex.value = serverStage.value
        // console.log(tabIndex.value);
        if (tabIndex.value > 4) tabIndex.value = 4
    }

})

const prev = () => {
    actRoutes.value = routesList.slice(0, 4)
    tabIndex.value = 0
    if (actRoutes.value[0].id == 0) {
        isDisabled.value = false
        isDisabled1.value = true
    }
}

const next = () => {
    actRoutes.value = routesList.slice(4, 5)
    tabIndex.value = actRoutes.value[0].id
    if (actRoutes.value[0].id == 4) {
        isDisabled.value = true
        isDisabled1.value = false
    }
}

const navigate = (index) => {
    // 自定义点击事件
    if (tabIndex.value == index || index > serverStage.value) {
        if (index > serverStage.value) {
            store.dispatch('asyncTips', { isShow: true, msg: '赛段暂未开启，请耐心等待~' })
        }

        return
    }
    tabIndex.value = index
}
// 我的奖励
let awardRecords = reactive({
    result: {
        list: []
    }
})
let page = ref(0)
let loading = false
const getAwardRecords = async () => {
    await api.awardRecords({ anchorId: isAnchor ? common.userId : common.anchorId, page: page.value }).then(res => {
        let result = res.data.result
        if (result) {
            if (page.value > 0) {
                result.list = awardRecords.result.list.concat(result.list)
            }
            awardRecords.result = result
            if (page.value < (result.totalPage - 1)) {
                loading = true;
                page.value++;
            } else loading = false;
        }
    })
}
const record = computed(() => {
    return awardRecords.result
})
// 滚动加载
const getMore = inject('methods').getMore
</script>

<template>
    <div class="ceremony">
        <ul class="ceremonyTab" v-if="store.state.isiOS || store.state.isAndroid">
            <div class="prev" :class="{ active: !isDisabled }" @click="prev()"></div>
            <template v-for="(item, index) in actRoutes" :key="index">
                <li @click="navigate(item.id)"
                    :class="[{ active: tabIndex == item.id }, { active1: item.id > serverStage }, 'tabItem' + index]"
                    v-html="item.id > serverStage ? item.name2 : item.name"></li>
            </template>
            <div class="next" :class="{ active: !isDisabled1 }" @click="next()"></div>
        </ul>
        <ul class="ceremonyTab" v-else>
            <template v-for="(item, index) in routesList" :key="index">
                <li @click="navigate(item.id)"
                    :class="[{ active: tabIndex == item.id }, { active1: item.id > serverStage }, 'tabItem' + index]"
                    v-html="item.id > serverStage ? item.name2 : item.name"></li>
            </template>
        </ul>
        <!-- 我的奖励、赛段规则按钮 -->
        <div class="fixTab" v-if="tabIndex != 0" :class="{ fixActive: !isAnchor }">
            <p @click="store.commit('changeIsShow', 'leg' + tabIndex)" :class="{ active: !isAnchor }"></p>
            <p v-if="isAnchor" @click="store.commit('changeIsShow', 'myAward'), getAwardRecords()"></p>
        </div>
        <div>
            <leg0 v-if="tabIndex == 0" />
            <leg1 v-if="tabIndex == 1" />
            <leg2 v-if="tabIndex == 2" />
            <leg3 v-if="tabIndex == 3" />
            <leg4 v-if="tabIndex == 4" />
        </div>
        <!-- 我的奖励 -->
        <Toast toast-style="myAward" v-if="store.state.showType == 'myAward'">
            <p class="close" @click="store.commit('changeIsShow'), page = 0" />
            <div class="info">
                <p>主播ID:{{ record.anchorId }}</p>
                <p class="name">昵称:{{ record.nickname }}</p>
            </div>
            <div class="awardListBox">
                <div>
                    <p>日期</p>
                    <p>赛段</p>
                    <p>获奖方式</p>
                    <p>奖励</p>
                </div>
                <ul class="awardList" @scroll="getMore($event, { loading, callFun: getAwardRecords })">
                    <li v-if="record.list.length > 0" v-for="(item, index) in record.list" :key="index">
                        <p>{{ item.date }}</p>
                        <p>{{ item.stageName }}</p>
                        <p>{{ item.getWay }}</p>
                        <p>{{ item.goodsName + '*' + item.goodsNum }}</p>
                    </li>
                    <EmptyData v-else />
                </ul>
            </div>
        </Toast>
    </div>
</template>

<style lang='scss' scoped></style>